<template>
  <div class="liveSet">
    <div class="form-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/doubleElevenList' }"
          >活动列表</el-breadcrumb-item
        >
        <el-breadcrumb-item>子活动列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="table-bar">
      <el-button type="primary" size="medium" @click="handleAdd"
        >添加子活动</el-button
      >
      <div class="inputSearch">
        <el-input
          placeholder="输入编号搜索"
          v-model="keyword"
          clearable
          @input="clearInput"
          @keyup.enter.native="searchInput"
        ></el-input>
        <el-button type="primary" size="medium" @click="searchInput"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="partnerList_table">
      <h3>
        主活动名称：<span style="font-weight: bold; line-height: 50px">{{
          fatherName
        }}</span>
      </h3>
      <div class="partnerList_bottom_table">
        <table>
          <tr>
            <th></th>
            <th>序号</th>
            <th>活动名称</th>
            <th>活动页面地址</th>
            <th>活动主图</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>排序</th>
            <th>状态</th>
            <th>活动类型</th>
            <th>所属卖场</th>
            <th>操作</th>
          </tr>
          <tr v-for="(v, i) in tableList" :key="i">
            <td>
              <font
                class="checkbox"
                :class="{ check_active: checkBoxAll.includes(i) }"
                @click="handlerCheckbox(i)"
                ><i class="el-icon-check"></i
              ></font>
            </td>
            <td>{{ v.item_id }}</td>
            <td>{{ v.name }}</td>
            <td>{{ v.pagepath }}</td>
            <td>
              <el-image
                v-if="v.img"
                style="width: 80px; height: 80px; margin-top: 20px"
                :src="v.img"
                :preview-src-list="[v.img]"
              >
              </el-image>
              <!-- <img style="max-width:200px;max-height:100px;" :src="v.img" alt=""/> -->
            </td>
            <td>
              {{ $moment(v.start_at * 1000).format("yyyy-MM-DD HH:mm:ss") }}
            </td>
            <td>
              {{ $moment(v.end_at * 1000).format("yyyy-MM-DD HH:mm:ss") }}
            </td>
            <td>{{ v.sort }}</td>
            <td>{{ v.status == 1 ? "进行中" : "已关闭" }}</td>
            <td>
              {{ v.type == 1 ? "抽奖" : "" }}（{{
                v.type_sub == 11
                  ? "线上九宫格抽奖"
                  : v.type_sub == 12
                  ? "线下大屏抽奖"
                  : "线下手动抽奖"
              }}）
            </td>
            <td>{{ v.market_name }}</td>
            <td>
              <button
                class="editor"
                :class="{ delete: v.status == 1 }"
                @click="toChange(v.item_id, v.status)"
              >
                {{ v.status == 1 ? "关闭" : "开启" }}
              </button>
              <button class="yellow" @click="getQrCode(v.item_id)">
                活动二维码
              </button>
              <el-button size="mini" style="margin:0 10px;" type="primary" @click="toEdit(v.item_id)">编辑</el-button>
              <button
                class="editor"
                v-if="v.type_sub == 13"
                @click="openWinList(v.item_id)"
              >
                中奖名单
              </button>
              <button
                class="editor"
                v-if="v.type_sub == 12"
                @click="toItem(v.item_id)"
              >
                {{ v.type_sub == 12 ? "线下大屏抽奖" : "" }}
              </button>
              <button
                class="editor"
                v-if="v.type_sub == 12"
                @click="toResult(v.item_id)"
              >
                {{ v.type_sub == 12 ? "大屏抽奖结果" : "" }}
              </button>
              <!-- <p v-if="v.type_sub == 13" style="margin:15px 0 0">
                <el-popconfirm
                style="margin-right:10px;"
                  title="确定推送活动开始通知吗？"
                  @confirm="pushMsg('start',v.item_id)"
                >
                  <el-button slot="reference" type="success">推送活动开始通知</el-button>
                </el-popconfirm>
                <el-popconfirm
                  title="确定推送活动结束通知吗？"
                  @confirm="pushMsg('end',v.item_id)"
                >
                  <el-button slot="reference" type="warning">推送活动结束通知</el-button>
                </el-popconfirm>
              </p> -->
            </td>
          </tr>
          <tr v-if="tableList.length == 0">
            <td class="table_title" colspan="10">当前数据空空如也</td>
          </tr>
        </table>
        <div class="partnerList_bottom_page">
          <div class="partnerList_bottom_page_left">
            <div
              class="partnerList_bottom_page_left_checkAll"
              @click="handerCheckAll"
            >
              <font class="checkbox" :class="{ check_active: checkAll }"
                ><i class="el-icon-check"></i
              ></font>
            </div>
            全选
            <!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
          </div>
          <div class="partnerList_bottom_page_right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              background
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <!-- 中奖名单对话框 -->
    <el-dialog
      title="中奖名单"
      :visible.sync="dialogVisibleWin"
      width="45%"
    >
      <div>
        <el-table border :data="winList" style="width: 100%; margin: 20px 0">
          <el-table-column align="center" label="中奖等级" width="auto">
            <template slot-scope="scope">
              <p>{{ scope.row.level }}等奖</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="nickname"
            align="center"
            label="用户昵称"
            width="auto"
          >
          </el-table-column>
          <el-table-column
            prop="mobile"
            align="center"
            label="用户手机号"
            width="auto"
          >
          </el-table-column>
          <el-table-column
            prop="date"
            align="center"
            label="用户头像"
            width="80"
          >
            <template slot-scope="scope">
              <img
                style="width: 30px; height: 30px"
                :src="scope.row.headimg"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            align="center"
            label="奖品主图"
            width="80"
          >
            <template slot-scope="scope">
              <img
                style="width: 30px; height: 30px"
                :src="scope.row.img"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            align="center"
            label="创建时间"
            width="auto"
          >
            <template slot-scope="scope">
              <p>
                {{ $moment(scope.row.created_at * 1000).format("yyyy-MM-DD") }}
              </p>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination
          @size-change="handleSizeChangeShop"
          @current-change="handleCurrentChangeShop"
          :current-page="selectPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="selectPagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="selectTotal"
          background
        >
        </el-pagination> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleWin = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleWin = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 活动二维码弹框 -->
    <el-dialog
      title="活动二维码"
      :visible.sync="dialogVisibleQr"
      width="288px"
      @closed="closeQrFn"
    >
      <div style="width: 100%; text-align: center">
        <img :src="QrCode" alt="" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleQr = false">取 消</el-button>
        <!-- <el-button type="primary" @click="dialogVisibleQr = false">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkAll: false,
      page: 1,
      pageSize: 10,
      total: 0,
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      tableList: [],
      keyword: "",
      code: "",
      activity_id: "", //主活动id
      fatherName: "", //主活动名称

      // 中奖名单
      dialogVisibleWin: false,
      winList: [], //中奖名单列表
      activityItemId: null,
      selectPage:1,
      selectPagesize:5,
      selectTotal:0,
      dialogVisibleQr: false,
      QrCode: "",
    };
  },
  mounted() {
    this.activity_id = this.$route.query.id;
    this.fatherName = this.$route.query.name;
    this.getSetList();
  },
  methods: {
    // 获取双十一子活动列表o
    getSetList() {
      let market_id = this.$route.query.market_id;
      let params = {
        keyword: this.keyword,
        page: this.page,
        pagesize: this.pageSize,
        activity_id: this.activity_id,
        market_id,
      };
      this.$http.post("/api/root/activity/son/lists", params).then((res) => {
        console.log(res, "活动列表");
        if (res.code == 1) {
          this.tableList = res.data.data ? res.data.data : [];
          this.total = res.data.count;
        }
      });
    },

    // 节目列表
    toParty(id) {
      this.$router.push({ name: "partyList", query: { id } });
    },

    // 搜索
    searchInput() {
      if (this.keyword != "") {
        this.page = 1;
        this.pageSize = 10;
        this.getSetList();
      }
    },
    // 清空输入框
    clearInput() {
      if (this.keyword == "") {
        this.page = 1;
        this.pageSize = 10;
        this.getSetList();
      }
    },

    // 添加活动按钮
    handleAdd() {
      let market_id = this.$route.query.market_id;
      this.$router.push({
        name: "addChildActivity",
        query: { activity_id: this.activity_id, market_id },
      });
    },

    // 删除按钮
    toDel(id) {
      this.$confirm("此操作将删除该活动, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http.post("/api/root/activity/son/del", { id }).then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.getSetList();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } else {
            this.$message.warning(res.msg);
          }
        });
      });
    },

    // 开始和结束推送按钮
    pushMsg(type,item_id){
      let params = {
        item_id,
        key:type=='start'?'activity_wx_push_msg_3537':'',
        action:type=='start'?3537:'',
      }
      this.$http.post('/api/root/activity/son/msgpush',params).then(res=>{
        if(res.code==1){
          this.$message.success(type=='start'?'推送活动开始通知成功':'推送活动结束通知成功')
        }else{
          this.$message.warning(res.msg)
        }
      })
    },

    // 获取活动二维码按钮
    getQrCode(item_id) {
      this.$http
        .post("/api/root/activity/son/qrcode", { item_id })
        .then((res) => {
          if (res.code == 1) {
            this.QrCode = res.data ? res.data : "";
            this.dialogVisibleQr = true;
          } else {
            this.$message.warning(res.msg);
          }
        });
    },
    // 关闭二维码对话框
    closeQrFn() {
      this.QrCode = "";
    },
    // 编辑按钮
    toEdit(id) {
      this.$router.push({
        name: "addChildActivity",
        query: { id, activity_id: this.activity_id },
      });
    },
    //线下大屏抽奖
    toItem(id) {
      this.$router.push({ name: "startRollingDisc", query: { id } });
    },
    //大屏抽奖结果
    toResult(id) {
      this.$router.push({ name: "rollingDiscResult", query: { id } });
    },
    // 更改状态
    toChange(id, sta) {
      console.log(sta, "/////");
      if (sta == 1) {
        this.$confirm("确定要关闭改活动吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.changeStatus(id, sta);
        });
      } else {
        this.changeStatus(id, sta);
      }
    },
    // 更改状态
    changeStatus(id, sta) {
      let params = {
        id,
        state: sta == 1 ? 0 : 1,
      };
      this.$http.post("/api/root/activity/son/status", params).then((res) => {
        console.log(res, "更改状态");
        if (res.code == 1) {
          this.$message.success("更改成功");
          this.getSetList();
        } else {
          this.$message.warning(res.msg);
        }
      });
    },

    // 多选
    handlerCheckbox(i) {
      console.log(i);
      let arr = this.checkBoxAll;
      if (arr.includes(i)) {
        let index = arr.indexOf(i);
        if (index != -1) {
          arr.splice(index, 1);
          this.shelvesAlls.splice(index, 1);
          if (this.checkBoxAll.length !== this.tableList.length) {
            this.checkAll = false;
          }
        }
      } else {
        this.checkBoxAll.push(i);
        this.shelvesAlls.push(this.tableList[i].id);
        if (this.checkBoxAll.length == this.tableList.length) {
          this.checkAll = true;
        }
      }
      console.log(this.shelvesAlls);
    },
    // 全选与全不选
    handerCheckAll() {
      this.checkAll = !this.checkAll;
      let arr = this.tableList.length;
      this.checkBoxAll = [];
      this.shelvesAlls = [];
      if (this.checkAll) {
        for (let i = 0; i < arr; i++) {
          this.checkBoxAll.push(i);
        }
        this.checkBoxAll.map((v) => {
          this.shelvesAlls.push(this.tableList[v].id.toString());
        });
      } else {
        this.checkBoxAll = [];
        this.shelvesAlls = [];
      }
      console.log(this.shelvesAlls);
    },

    //更改直播配置
    // toChange(id,sta){
    //     let status = sta==0?1:0;
    //     this.$http.post('/api/root/SystemConfig/changeStatus',{id,status}).then(res=>{
    //         console.log(res,'直播配置结果');
    //         if(res.code==1){
    //             this.$message.success('操作成功')
    //             this.getSetList()
    //         }else{
    //             this.$message.warning(res.msg)
    //         }
    //     })
    // },

    // 中奖名单列表
    openWinList(id) {
      this.activityItemId = id;
      this.dialogVisibleWin = true;
      this.getWinList();
    },
    // 获取中奖名单列表
    getWinList() {
      let params = {
        // page:this.selectPage,
        // pagesize:this.selectPagesize,
        activity_no: this.activityItemId,
      };
      this.$http
        .post("/api/root/activity/son/config/namelist", params)
        .then((res) => {
          console.log(res, "中奖名单列表");
          if (res.code == 1) {
            this.winList = res.data;
            // this.selectTotal = 
          }
        });
    },
    // 中奖名单分页
    handleSizeChangeShop(val) {
      // this.selectPage = 1;
      // this.selectPagesize = val;
      this.getWinList();
    },
    handleCurrentChangeShop(val) {
      // this.selectPage = val;
      this.getWinList();
    },

    handleSizeChange(val) {
      this.page = 1;
      this.pageSize = val;
      this.getSetList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getSetList();
    },
  },
};
</script>
<style lang="less" scoped>
@import "index.less";
</style>